<template>
    <div>
        <Header class="header">开发环境配置</Header>
        <hr>
        <Content class="content">
          <Form :model="formItem" :label-width="80">
              <Row>
                 <Col span="12">
                   <FormItem required label="api_port">
                       <Input v-model="formItem.api_port"></Input>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <FormItem required label="dist_port">
                       <Input v-model="formItem.dist_port"></Input>
                   </FormItem>
                 </Col>
              </Row>
              <Row>
                 <Col span="12">
                   <FormItem label="host_env">
                       <Select v-model="formItem.host_env">
                           <Option value="test">测试环境</Option>
                           <Option value="prod">正式环境</Option>
                       </Select>
                   </FormItem>
                 </Col>
                 <Col span="12">
                   <FormItem label="app">
                       <Select v-model="formItem.app">
                           <Option value="cs">cs</Option>
                           <Option value="dw">dw</Option>
                           <Option value="hl">hl</Option>
                       </Select>
                   </FormItem>
                 </Col>
              </Row>
              <FormItem label="new_host">
                  <Input v-model="formItem.new_host"></Input>
              </FormItem>
              <Row>
                <Col span="8">
                  <FormItem label="local_data">
                      <i-switch v-model="formItem.local_data" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="remote_data">
                      <i-switch v-model="formItem.remote_data" size="large" @on-change="remoteDataChange">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="seeker_data">
                      <i-switch v-model="formItem.seeker_data" size="large" @on-change="seekerDataChange">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8">
                  <FormItem label="seeker_open">
                      <i-switch v-model="formItem.seeker_open" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="request_log">
                      <i-switch v-model="formItem.request_log" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
                <Col span="8">
                  <FormItem label="request_body_out">
                      <i-switch v-model="formItem.request_body_out" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span="8">
                  <FormItem label="auto_login">
                      <i-switch v-model="formItem.auto_login" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                </Col>
                <Col span="16">
                  <FormItem label="user_name">
                      <Select v-model="formItem.user_name" :disabled="!formItem.auto_login">
                          <Option v-for="user in formItem.users" :value="user.name" :key="user.name" v-text="user.name"></Option>
                      </Select>
                  </FormItem>
                </Col>
              </Row>
            </Form>
        </Content>
        <hr>
        <Footer class="footer">
          <div class="button-panel-button">
              <Button class="pull-right" @click="submit" type="primary">确认修改并重启</Button>
              <Button class="pull-right mr10" @click="close">取消</Button>
              <div style="clear: both;"></div>
          </div>
        </Footer>
    </div>
</template>
<script>
import $ from "@/common/index";

export default {
  props: {},
  data() {
    return {
      formItem: {
        api_port: "",
        dist_port: "",
        host_env: "", // test|prod
        app: "", // hl/cs/dw
        new_host: "",
        remote_host: "",
        local_data: false,
        remote_data: false,
        seeker_data: false,
        seeker_open: false,
        request_log: false,
        request_body_out: false,
        auto_login: false,
        user_name: "",
        users: [
          {
            name: "",
            password: ""
          }
        ]
      }
    };
  },
  computed: {},
  watch: {},
  methods: {
    remoteDataChange(status) {
      if (status) {
        this.formItem.seeker_data = false;
      }
    },
    seekerDataChange(status) {
      if (status) {
        this.formItem.remote_data = false;
      }
    },
    init() {
      $.link("/service/app/getConfigJson", {
        method: "get"
      }).then(res => {
        console.log(res);
        this.formItem = res;
      });
    },
    updateRemoteHost() {
      let env = this.formItem.host_env === "test" ? "test." : "";
      let remote_host =
        "http://" + env + this.formItem.app + ".kuaicuishou.com";
      if (this.formItem.new_host) {
        this.formItem.remote_host = this.formItem.new_host;
      }
      this.formItem.remote_host = remote_host;
    },
    submit() {
      this.updateRemoteHost();
      if (
        !this.formItem.local_data &&
        !this.formItem.remote_data &&
        !this.formItem.seeker_data
      ) {
        this.$Message.error({
          content: "必选选择一个数据源！"
        });
        return;
      }
      $.link("/service/app/setConfigJson", this.formItem, {
        method: "post"
      }).then(res => {
        this.close();
      });
    },
    close() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="less" scoped>
hr {
  margin: 0 10px;
}
.header {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
.content {
  padding: 10px 20px;
}
.footer {
  padding: 10px;
}
</style>
